<Redirect>

该组件用来实现重定向，注意重新定向的路由会覆盖当前路由的历史栈，这一点很重要。

import React from 'react';
import ReactDOM from 'react-dom';
import {Link,BrowserRouter as Router,Route,Redirect} from 'react-router-dom';

class MyRoutes extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <Link to="/">首页</Link>
                    <Link to="/about">关于</Link>
                    <Link to="/address">地址</Link>
                    <Route exact path="/" component={()=>{return <h1>首页</h1>}} />
                    <Route exact path="/about" component={()=>{return <h1>关于</h1>}} />
                    <Redirect to="/" />
                </div>
            </Router>
        );
    }
}
ReactDOM.render(<MyRoutes/>,document.querySelector("#root"))

上例，当指向没有匹配的路由时，则重定向到"/"路由。

问题来了，这里没有配置"/address"的路由，但是有"/address"链接，这时点击"/address"会跳转到"/address"，并没有执行重定向。而在"/address"路由下刷新浏览器，则会定向到"/"。这么设计应该是为了避免死循环。

Redirect应该放在所有平级Route的后边，因为是顺序匹配。

to:string

指向重定向的路由。

<Redirect to="/" />

to:object

配置一个对象：

<Redirect to={{
    pathname:"/",
    search:"",
    state:null
}} />

配置的是location对象。

push:boolean

默认为false，当为true时，表示重定向的路由不再是replace，而是push。

比如：a到b，b到c，c重定向到d，那么：

push为true，历史栈就是：a>b>c>d

push为false，历史栈就是：a>b>d

from:string

针对匹配的该路由执行重定向。

<Router>
    <div>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Route exact path="/" component={()=>{return <h1>首页</h1>}} />
        <Switch>
            <Redirect from="/about" to="/" />
            <Route exact path="/about" component={()=>{return <h1>关于</h1>}} />
        </Switch>

    </div>
</Router>

该属性需要配合Switch组件使用，否则不生效。

上例，当访问"/about"则会被重定向到"/"，注意这个过程不需要页面重载。

from的配置会响应到Switch组件内其它Route的行为，所以要确保正确合理的配置。

动态Redirect

除了初始配置Redirect组件外，也可以采用动态渲染的方式。

比如：登陆校验

<Router>
    <div>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Route exact path="/" component={()=>{return <h1>首页</h1>}} />
        <Route exact path="/about" component={()=>{
            return this.state.logined?<h1>首页</h1>:<Redirect to="/" />
        }} />
    </div>
</Router>

这个例子中，当切换到"/about"路由时，检测到未登陆，那么就重定向到"/"，这个过程是立即执行的。可以利用这种写法，做一些登录、权限的校验。

Redirect组件